import { View, Text, StyleSheet, Pressable } from "react-native"
import React from "react"
import { scale } from "react-native-size-matters"
import { Feather, MaterialIcons, MaterialCommunityIcons, FontAwesome5 } from "@expo/vector-icons"

//Local Imports
import { colors, typography } from "app/theme"
import { useAppSelector } from "app/redux/hooks"

const CapsuleView = ({ element, handleRemoveClient, handleRemoveService }) => {
  return (
    <>
      <View style={{ flexDirection: "row", alignItems: "center", paddingLeft: scale(5) }}>
        <Feather name="user-plus" size={scale(15)} color="black" />
        <Text style={[styles.infoText, { marginLeft: scale(10) }]}>Client</Text>
      </View>
      <View style={styles.capsule}>
        <Text style={{ width: scale(250), color: colors.black }}>{element?.name}</Text>
        <MaterialIcons
          name="delete"
          size={scale(16)}
          color="black"
          onPress={() => handleRemoveClient(element?.id)}
        />
      </View>

      {element?.services?.length !== 0 && (
        <>
          <View style={{ flexDirection: "row", alignItems: "center", paddingLeft: scale(5) }}>
            {element?.services && (
              <>
                <MaterialCommunityIcons
                  name="bag-suitcase-outline"
                  size={scale(15)}
                  color={colors.black}
                />
                <Text style={[styles.infoText, { marginLeft: scale(10) }]}>Services</Text>
              </>
            )}
          </View>
          {element?.services?.map((item, index) => {
            return (
              <View style={styles.capsule} key={index}>
                <Text style={{ width: scale(250), color: colors.black }}>{item?.name}</Text>
                <View style={{ flexDirection: "row", alignItems: "center" }}>
                  <FontAwesome5 name="pencil-alt" size={scale(12)} color="black" />
                  <MaterialIcons
                    name="delete"
                    size={scale(16)}
                    color={colors.black}
                    onPress={() => handleRemoveService(element, item?.id)}
                  />
                </View>
              </View>
            )
          })}
        </>
      )}
    </>
  )
}

export default CapsuleView

const styles = StyleSheet.create({
  capsule: {
    marginVertical: scale(13),
    borderRadius: 10,
    backgroundColor: "rgb(225, 219, 202)",
    width: "100%",
    paddingHorizontal: scale(20),
    paddingVertical: scale(4),
    justifyContent: "space-between",
    flexDirection: "row",
    alignItems: "center",
  },
  infoText: {
    fontSize: 14,
    fontFamily: typography.fonts.spaceGrotesk.bold,
    color: colors.grey,
  },
  label: { marginVertical: 5, color: colors.grey },
  container: {
    height: 48,
    borderColor: colors.border,
    borderWidth: StyleSheet.hairlineWidth * 2,
    borderRadius: 4,
    backgroundColor: colors.white,
    paddingTop: 15,
  },
})
